/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-09 21:33:00
 */
import React, { memo, useEffect, useState } from "react";
import style from "../style/songList.module.scss";
import NavTitle from "./NavTitle";
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import { getDailyRecommendList } from "@/service/api/songList/songList";
import { ISongList } from "@/service/api/songList/types";
import { useNavigate } from "react-router-dom";
import { usePlay } from "@/hooks/play/usePlay";
import { numberAddUnit } from "@/utils/util";

interface ISongListProps {}
// 今天日期
const today = new Date().getDate();

const SongList: React.FC<ISongListProps> = memo((props) => {
  console.log('列表');
  
  const [songList, setSongList] = useState<ISongList[]>([]);
  const { playSongList } = usePlay();
  const Navigate = useNavigate();
  // 跳转歌单详情
  const toDetail = (id: number) => {
    Navigate("/songListDetail", { state: {id} });
  };
  const play = (id: number, e: MouseEvent) => {
    e.stopPropagation()
    playSongList(id)
  }
  useEffect(() => {
    // 获取歌单
    (async () => {
      const { result } = await getDailyRecommendList();
      setSongList(result);
    })();
  }, []);
  return (
    <>
      <NavTitle title="推荐歌单" />
      <div className={style.songList}>
        <div className={`${style.item + ' ' + style.daily} relative overflow-hidden`}>
          <div className={style.tip}>
            <p>根据您的音乐口味生成</p>
            <p>每日更新</p>
          </div>
          <div
            className={style.cover  + " relative cursor-pointer cover flex-c-c"}
            onClick={() => Navigate("/dailySongs")}
          >
            <img
              src="/src/assets/imgs/calendar_bg.png"
              className="absolute top-0 w-full"
            />
            <div className="absolute top-0 w-full h-full text-white flex-c-c">
              <SvgIcon name="calendar" size={80} />
              <span
                className="absolute text-lg font-bold transform translate-y-2"
                style={{ fontSize: "35px" }}
              >
                {today}
              </span>
            </div>
          </div>
          <span className={style.name + " mt-1 name text-sub-text-color"}>每日歌曲推荐</span>
        </div>
        {songList.map((item) => {
          return (
            <div className={style.item} key={item.id}>
              <div className={style.cover} onClick={() => toDetail(item.id)}>
                <img src={item.picUrl} className="absolute top-0 w-full" />
                <div className={style.playCount}>
                  <SvgIcon
                    name="play-empty-icon"
                    size={13}
                    style={{ marginRight: "2px" }}
                  />
                  {numberAddUnit(item.playCount)}
                </div>
                <div
                  className={style.play + " flex-c-c trans text-theme-color"}
                  onClick={(e: any) => play(item.id, e)}
                >
                  <SvgIcon
                    name="play-icon"
                    size={24}
                    diyStyle={{ transform: "translateX(2px)" }}
                  />
                </div>
              </div>
              <span className={style.name + " mt-1 text-sub-text-color"}>{item.name}</span>
            </div>
          );
        })}
      </div>
    </>
  );
});

export default SongList;
